<template>
  <div class="centent">
    <Head></Head>
    <div class="datum">
      <div class="datum-box">
        <div class="datum-box-subject">
          <div class="subject-photo">
            <!-- <img :src="info.avatar" alt /> -->
            <el-avatar :src="info.avatar" :size="100"></el-avatar>
          </div>
          <div class="subject-phone">
            <p>{{info.nickname}}</p>
          </div>
          <div class="subject-conserve" @click="go_filings">
            <div class="subject-conserve-img">
              <img src="../../images/conserve.png" alt />
            </div>
            <p>存证备案</p>
          </div>
          <div class="subject-wire"></div>
          <div
            :class="selectVal===1||selectVal===-1? 'subject-item action':'subject-item '"
            @click="selectChange(1)"
          >
            <div class="subject-item-img" style="width:21px;height:25px">
              <img
                v-if="selectVal===1||selectVal===-1"
                src="../../images/item-subject-action.png"
                alt
              />
              <img v-else src="../../images/item-subject.png" alt />
            </div>
            <p>我的主体</p>
          </div>
          <div
            :class="selectVal===2? 'subject-item action':'subject-item '"
            @click="selectChange(2)"
          >
            <div class="subject-item-img" style="width:21px;height:25px">
              <img v-if="selectVal!=2" src="../../images/item-message.png" alt />
              <img v-else src="../../images/item-message-action.png" alt />
            </div>
            <p>我的留言</p>
          </div>
          <div
            :class="selectVal===3? 'subject-item action':'subject-item '"
            @click="selectChange(3)"
          >
            <div class="subject-item-img" style="width:21px;height:25px">
              <img v-if="selectVal!=3" src="../../images/item-collect.png" alt />
              <img v-else src="../../images/item-collect-action.png" alt />
            </div>
            <p>我的收藏</p>
          </div>
          <div
            :class="selectVal===4? 'subject-item action':'subject-item '"
            @click="selectChange(4)"
          >
            <div class="subject-item-img" style="width:21px;height:25px">
              <img v-if="selectVal!=4" src="../../images/item-datum.png" alt />
              <img v-else src="../../images/item-datum-action.png" alt />
            </div>
            <span>资料与账号</span>
          </div>
          <div
            :class="selectVal===5? 'subject-item action':'subject-item '"
            @click="selectChange(5)"
          >
            <div class="subject-item-img" style="width:21px;height:25px">
              <img v-if="selectVal!=5" src="../../images/item-exit.png" alt />
              <img v-else src="../../images/item-exit-action.png" alt />
            </div>
            <span>退出登录</span>
          </div>
        </div>
        <!-- 我的主体 -->
        <div class="mine" v-if="selectVal===1">
          <template v-if="digit_list.length!=0">
            <div class="mine-top">
              <div class="mine-top-title">
                <div class="mine-top-wire"></div>
                <p>我的主体</p>
              </div>

              <div class="mine-down" v-if="Information?.natureId == 1">
                <div class="mine_edit" @click="mine_edit">
                  <img src="@/images/edit.png" alt />
                  编辑
                </div>
                <div class="mine-down-item">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>主体性质：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information?.natureName}}</p>
                  </div>
                </div>
                <div class="mine-down-item">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>姓名：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.name}}</p>
                  </div>
                </div>
                <div class="mine-down-item">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>证件类型：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.typeName}}</p>
                  </div>
                </div>
                <div class="mine-down-item">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>证件号码：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.cardNo}}</p>
                  </div>
                </div>
                <div class="mine-down-item">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>联系方式：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.phone}}</p>
                  </div>
                </div>
                <div class="mine-down-item">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>邮箱：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.email}}</p>
                  </div>
                </div>
                <div class="mine-down-item">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>地址</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.provinceName+" "+Information.cityName+" "+Information.regionName+" "+Information.detail }}</p>
                  </div>
                </div>
              </div>
              <div v-else class="mine-down">
                <div class="mine_edit" @click="mine_edit">
                  <img src="@/images/edit.png" alt />
                  编辑
                </div>
                <div class="mine-down-item2">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>主体性质</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.natureName}}</p>
                  </div>
                </div>
                <div class="mine-down-item2">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>主体名称：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.name}}</p>
                  </div>
                </div>
                <div class="mine-down-item2">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>统一社会信用代码：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.cardNo}}</p>
                  </div>
                </div>
                <div class="mine-down-item2">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>联系人：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.contactName}}</p>
                  </div>
                </div>
                <div class="mine-down-item2">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>手机号码：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.phone}}</p>
                  </div>
                </div>
                <div class="mine-down-item2">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>座机：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.tel}}</p>
                  </div>
                </div>
                <div class="mine-down-item2">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>邮箱：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.email}}</p>
                  </div>
                </div>
                <div class="mine-down-item2">
                  <div class="mine-down-item-title">
                    <div class="mine-down-item-title-dot"></div>
                    <p>地址：</p>
                  </div>
                  <div class="mine-down-item-text">
                    <p>{{Information.provinceName+" "+Information.cityName+" "+Information.regionName+" "+Information.detail }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="mine-content">
              <div class="mine-content-title">
                <div class="mine-content-wire"></div>
                <p>我的数字人 &nbsp; ({{ digit_list.length }})</p>
              </div>
              <div class="mine-list-title">
                <div
                  class="mine-list-title-item"
                  :class="digit_index ===0 ? 'action':''"
                  @click="digit_open(0)"
                >
                  全部
                  <div
                    class="mine-list-title-item-wier"
                    :style="digit_index===0?'':'background:none'"
                  ></div>
                </div>
                <div
                  class="mine-list-title-item"
                  :class="digit_index ===1 ? 'action':''"
                  @click="digit_open(1)"
                >
                  待审核（{{verityNums.treatNum||0}}）
                  <div
                    class="mine-list-title-item-wier"
                    :style="digit_index===1?'':'background:none'"
                  ></div>
                </div>
                <div
                  class="mine-list-title-item"
                  :class="digit_index ===3 ? 'action':''"
                  @click="digit_open(3)"
                >
                  未通过（{{verityNums.failNum||0}}）
                  <div
                    class="mine-list-title-item-wier"
                    :style="digit_index===3?'':'background:none'"
                  ></div>
                </div>
                <div
                  class="mine-list-title-item"
                  :class="digit_index ===2 ? 'action':''"
                  @click="digit_open(2)"
                >
                  已通过（{{verityNums.passNum||0}}）
                  <div
                    class="mine-list-title-item-wier"
                    :style="digit_index===2?'':'background:none'"
                  ></div>
                </div>
              </div>
              <div class="mine-list-wier"></div>
              <template v-if="digit_list_2.length>0">
                <div class="mine-list-item" v-for="item in digit_list_2" :key="item.id">
                  <div class="mine-list-item-img">
                    <img :src="item.imgUrl" alt />
                  </div>
                  <div class="mine-list-item-text">
                    <div class="intro-top">
                      <div class="intro-top-left">
                        <div class="intro-top-left-box">
                          <div class="intro-top-left-box-name">{{item.name}}</div>
                          <div class="intro-top-left-box-role">{{item.attrName}}</div>
                          <!-- <div class="intro-top-left-box-designation">{{item.subjectInfo.name}}</div> -->
                        </div>
                        <div class="intro-top-left-time">{{ item.updateTime || item.createTime}}</div>
                        <div
                          class="intro-top-left-result"
                          v-if="item.payStatus != 1"
                          :style="item.verifyStatus==1?'color:#FBAF29':item.verifyStatus==2?'color:#58BB00':'color:#F53616'"
                        >
                          {{item.verifyStatus == 1?'待审核':item.verifyStatus == 2?'审核通过':'审核未通过：'}}
                          <template
                            v-if="item.verifyStatus==3"
                          >{{ item.remark }}</template>
                        </div>
                      </div>
                      <div
                        class="intro-top-right"
                        v-if="item.verifyStatus!=3&&item.payStatus != 1"
                        @click="selectChange(-1,item)"
                      >查看详情</div>
                      <div
                        class="intro-top-right"
                        v-else-if="item.verifyStatus!=3&&item.payStatus == 1"
                        @click="go_pag(item)"
                      >去支付</div>
                      <div class="intro-top-right2" v-else @click="select_go(item)">修改</div>
                    </div>
                    <div class="intro-down">{{item.content}}</div>
                  </div>
                </div>
              </template>
              <div v-else style="text-align: center;padding:100px 0">
                <img src="@/images/empty.png" alt />
                <div style="font-size: 18px;color: #999999;">暂无内容</div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="mine-top" style="min-height:780px">
              <div style="text-align: center;padding:173px 0 100px 50px">
                <img src="@/images/empty.png" alt />
                <div style="font-size: 18px;color: #999999;">暂无内容</div>
              </div>
            </div>
          </template>
        </div>

        <!-- 详情 -->
        <div class="details" v-if="selectVal===-1" ref="suibiandeqiming">
          <div class="details-info">
            <div class="details-info-title">
              <p style="color:#666666;cursor: pointer;" @click="selectChange(1)">返回上一级</p>
              <div class="details-info-title-img">
                <img src="../../images/right-arrow.png" alt />
              </div>
              <p style="color:#3C7CD8;">{{digit_details.name}}</p>
            </div>
            <div class="details-info-box">
              <div class="details-info-box-img">
                <img :src="digit_details.imgUrl" alt />
                <!-- <div class="details-info-box-img-bg">
                  <div class="details-info-box-img-bg-logo">
                    <img src="../../images/id-logo.png" alt />
                  </div>
                  <p>ID:{{digit_details.cardNo}}</p>
                </div>-->
              </div>
              <div class="details-info-box-center">
                <div class="my-info">
                  <p class="my-info-p">{{digit_details.name}}</p>
                  <div class="my-info-status">{{digit_details.attrName}}</div>
                  <div class="my-info-pro">
                    <div class="share">
                      <img
                        @click="shareShow=!shareShow"
                        v-show="!shareShow"
                        src="../../images/share1.png"
                        alt
                      />
                      <img
                        @click="shareShow=!shareShow"
                        v-show="shareShow"
                        src="../../images/share2.png"
                        alt
                      />
                      <div class="share-box" v-show="shareShow">
                        <div class="share-box-item" @click="copy(1)">
                          <img src="../../images/link.png" alt />
                          复制分享连接
                        </div>
                        <div class="share-box-item" @click="copy(1)">
                          <img src="../../images/we-chat-logo.png" alt />
                          分享到微信
                        </div>
                        <div class="share-box-item" @click="copy(1)">
                          <img src="../../images/qq.png" alt />
                          分享到QQ
                        </div>
                        <div class="share-box-item" @click="copy(2)">
                          <img src="../../images/qq-space.png" alt />
                          分享到QQ空间
                        </div>
                        <div class="share-box-item" @click="copy(3)">
                          <img src="../../images/microblog.png" alt />
                          分享到微博
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="my-info-wier"></div>
                <div class="my-info-id">ID：{{digit_details.cardNo}}</div>
                <div class="my-info-box">
                  <div class="my-info-box-item">
                    <div class="my-info-box-item-sex">
                      <div class="my-info-box-item-sex-circle"></div>性别：
                    </div>
                    <div class="my-info-box-item-girl">{{ digit_details.sexName }}</div>
                  </div>
                  <div class="my-info-box-item">
                    <div class="my-info-box-item-sex">
                      <div class="my-info-box-item-sex-circle"></div>生日：
                    </div>
                    <div class="my-info-box-item-girl">{{ digit_details.birthday }}</div>
                  </div>
                  <div class="my-info-box-item">
                    <div class="my-info-box-item-sex">
                      <div class="my-info-box-item-sex-circle"></div>年龄：
                    </div>
                    <div class="my-info-box-item-girl">{{digit_details.age}}</div>
                  </div>
                  <!-- <div class="my-info-box-item">
                    <div class="my-info-box-item-sex">
                      <div class="my-info-box-item-sex-circle"></div>运维主体：
                    </div>
                    <div class="my-info-box-item-girl">{{ digit_details.subjectInfo.name }}</div>
                  </div>-->
                </div>

                <div class="my-info-looks_ss">
                  <div class="my-info-looks-circle"></div>
                  <div class="my-info-looks-text">形象已发布平台：</div>
                  <div
                    class="my-info-looks-tint"
                    style="margin-right:10px"
                    @click="open_url(item.platformUrl)"
                    :style="item.platformUrl!=''&&item.platformUrl!=null?'border-bottom: 1px solid #3a7bd8;cursor: pointer;':''"
                    v-for="item,index in digit_details.peopleRelevanceList"
                    :key="index"
                  >
                    {{item.name}}
                    <template
                      v-if="digit_details.peopleRelevanceList.length-1 != index"
                    >、</template>
                  </div>
                  <!-- <div class="my-info-looks-tint">快手</div>、 -->
                  <!-- <div class="my-info-looks-tint">{{digit_details.platformNames}}</div> -->
                </div>

                <div class="my-info-looks_ss">
                  <div class="my-info-looks-circle"></div>
                  <div class="my-info-looks-text">所在行业：</div>
                  <!-- <div class="my-info-looks-item">快手</div>、
                  <div class="my-info-looks-item">快手</div>、-->
                  <div class="my-info-looks-item">{{digit_details.industryNames}}</div>
                </div>

                <div class="my-info-looks_ss">
                  <div class="my-info-looks-circle"></div>
                  <div class="my-info-looks-text">驱动方式：</div>
                  <!-- <div class="my-info-looks-item">Al模型</div>、 -->
                  <div class="my-info-looks-item">{{digit_details.actuateNames}}</div>
                </div>
                <div class="my-info-looks_ss">
                  <div class="my-info-looks-circle"></div>
                  <div class="my-info-looks-text">权属人：</div>
                  <!-- <div class="my-info-looks-item">Al模型</div>、 -->
                  <div class="my-info-looks-item">{{digit_name}}</div>
                </div>

                <div class="my-info-wier"></div>
                <div class="my-info-accredit">
                  <div class="my-info-looks">
                    <div class="my-info-looks-circle"></div>
                    <div class="my-info-looks-text">是否接收授权：</div>

                    <div class="my-info-looks-item">{{ digit_details.accreditValue}}</div>
                  </div>
                  <div class="my-info-looks">
                    <div class="my-info-looks-circle"></div>
                    <div class="my-info-looks-text">是否接受转让：</div>
                    <div class="my-info-looks-item">{{ digit_details.copyrightValue}}</div>
                  </div>
                </div>

                <div class="my-info-wier"></div>

                <div class="my-info-introduce">
                  <div class="my-info-introduce-circle"></div>
                  <div class="my-info-introduce-text">
                    TA的介绍:
                    <span>{{digit_details.content}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="details-accredit">
            <div
              class="mine-top-title"
              style="font-size: 24px; font-weight: 500;color: #000;margin-bottom: 30px;"
            >
              <div class="mine-top-wire"></div>
              <p>授权信息</p>
            </div>
            <div class="details-accredit-item">
              <p>{{digit_details.imgType!=2?'【外观形象原创声明】':'【外观形象使用授权书】'}}</p>
              <p
                @click="dow(digit_details.imgDoc,digit_details.imgType!=2?'【外观形象原创声明】':'【外观形象使用授权书】')"
              >立即下载</p>
            </div>
            <div class="details-accredit-item">
              <p>{{digit_details.audioType!=2?'【声音原创声明】':'【声音使用授权书】'}}</p>
              <p
                @click="dow(digit_details.audioDoc,digit_details.audioType!=2?'【声音原创声明】':'【声音使用授权书】')"
              >立即下载</p>
            </div>
          </div>

          <div class="details-accredit">
            <div
              class="mine-top-title"
              style="font-size: 24px; font-weight: 500;color: #000;margin-bottom: 30px;"
            >
              <div class="mine-top-wire"></div>
              <p>外观形象</p>
            </div>
            <div class="details-accredit-box">
              <div class="details-accredit-img">
                <img :src="digit_details.imgLeft45" alt />
                <p>左45度</p>
              </div>
              <div class="details-accredit-img">
                <img :src="digit_details.imgUrl" alt />
                <p>正面</p>
              </div>
              <div class="details-accredit-img">
                <img :src="digit_details.imgRight45" alt />
                <p>右45度</p>
              </div>
            </div>
            <!-- <div class="details-accredit-video">
              <video :src="digit_details.video" controls="controls"></video>
              <p>数字人视频</p>
            </div>-->
          </div>

          <div class="details-ccie" v-if="digit_details.verifyStatus == 2">
            <div
              class="mine-top-title"
              style="font-size: 24px; font-weight: 500;color: #000;margin-bottom: 30px;"
            >
              <div class="mine-top-wire"></div>
              <p>获得证书</p>
            </div>
            <!-- <template v-if="digit_details.verifyImg!=''&&digit_details.makerImg!=''&&digit_details.filingImg!=''&&digit_details.cardImg!=''"> -->
            <template
              v-if="digit_details.verifyImg!=''&&digit_details.makerImg!=''&&digit_details.filingImg!=''&&digit_details.cardImg!=''"
            >
              <div class="details-ccie-box">
                <div class="details-ccie-box-item">
                  <!-- <img :src="digit_details.verifyImg" alt /> -->
                  <el-image
                    style="width: 100%"
                    :src="digit_details.verifyImg"
                    :preview-src-list="srcList"
                  ></el-image>
                </div>
                <!-- 有跨域问题 -->
                <div
                  class="details-ccie-box-item"
                  @click="dow(digit_details.makerImg,digit_details.cardNo+'证书')"
                  style="cursor: pointer;"
                >
                  <img src="../../images/makerImg.png" alt width="100%" />
                  <!-- <el-image
                    style="width: 100%"
                    :src="digit_details.makerImg"
                    :preview-src-list="srcList"
                  ></el-image>-->
                </div>
                <div class="details-ccie-box-item">
                  <!-- <img :src="digit_details.filingImg" alt /> -->
                  <el-image
                    style="width: 100%"
                    :src="digit_details.filingImg"
                    :preview-src-list="srcList"
                  ></el-image>
                </div>
              </div>
              <!-- <div class="mine-top-title" style="font-size: 14px; font-weight: 500;color: #000;margin-bottom: 21px;margin-top: 42px;">
              <div class="mine-top-wire"></div>
              <p>数字人备案证书及数字人身份证</p>
              </div>-->
              <div class="details-ccie-box" style="margin-top:40px">
                <!-- <div class="details-ccie-box-item">
                <img :src="digit_details.filingImg" alt />
                </div>-->
                <div class="details-ccie-box-card">
                  <!-- <img :src="digit_details.cardImg" alt /> -->
                  <el-image
                    style="width: 100%;"
                    :src="digit_details.cardImg"
                    :preview-src-list="srcList"
                  ></el-image>
                </div>
              </div>
            </template>
            <template v-else>
              <div style="font-size: 20px;color: #666666;text-align:center">
                <img src="../../images/clock.gif" alt />
                <div>审核已通过，证书生成中，需要几分钟的时间，请耐心等候...</div>
              </div>
            </template>
          </div>
          <div class="details-tort" v-if="digit_details.verifyStatus == 2">
            <div class="details-tort-img">
              <img src="../../images/tort.png" alt />
            </div>
            <div class="details-tort-text" @click="saveImage">
              <b>如遭侵权</b>
              <p>一键打包证据，转交互联网法院</p>
            </div>
          </div>
        </div>

        <!-- 我的留言 -->
        <div class="datum-box-details" v-if="selectVal===2">
          <div class="details-title" style="margin-bottom:40px">
            <div class="details-title-wire"></div>
            <p>我的留言</p>
          </div>
          <template v-if="message_list.length>0">
            <div class="info" v-for="item in message_list" :key="item.id">
              <div class="info-img">
                <!-- <img :src="item.avatar" alt /> -->
                <el-avatar :fit="'cover'" :size="66" :src="item.avatar"></el-avatar>
                <div class="info-img-dot" v-if="item.isRead == 2"></div>
              </div>
              <div class="info-text">
                <div class="info-text-box">
                  <p>{{ item.content }}</p>
                </div>
                <div class="info-text-time">
                  {{item.createTime}}
                  <span>{{item.nickname}}</span>
                </div>
              </div>
            </div>
            <div style="display: flex;justify-content: center;padding-bottom: 20px;">
              <el-pagination
                @current-change="handleCurrentChange"
                :hide-on-single-page="true"
                background
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total"
              ></el-pagination>
            </div>
          </template>
          <!-- <div  class="mine-top">
            
          </div>-->
          <div v-else style="text-align: center;padding:100px 0 100px 50px">
            <img src="@/images/empty.png" alt />
            <div style="font-size: 18px;color: #999999;">暂无内容</div>
          </div>
        </div>

        <!-- 我的收藏 -->
        <div class="collect" v-if="selectVal===3" style="min-height:780px">
          <div class="details-title" style="margin-bottom:40px">
            <div class="details-title-wire"></div>
            <p>我的收藏</p>
          </div>
          <div class="collect-box">
            <template v-if="collect_lists.length>0">
              <Falls @sendmsg="getmsg" :show="true" :list="collect_lists"></Falls>

              <div style="display: flex;justify-content: center;padding-bottom: 20px;">
                <el-pagination
                  @current-change="handleCurrentChange_collect"
                  :hide-on-single-page="true"
                  background
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="total_collect"
                ></el-pagination>
              </div>
            </template>
            <div v-else style="text-align: center;padding:100px 0">
              <img src="@/images/empty.png" alt />
              <div style="font-size: 18px;color: #999999;">暂无内容</div>
            </div>
            <!-- <div v-else class="mine-top">
              <div style="text-align: center;padding:100px 0">
                <img src="@/images/empty.png" alt="">
                <div style="font-size: 18px;color: #999999;">
                  暂无内容
                </div>
              </div>
            </div>-->
          </div>
        </div>

        <!-- 资料与账号 -->
        <div class="datum-box-details" v-if="selectVal===4">
          <div class="details-title">
            <div class="details-title-wire"></div>
            <p>资料与账号</p>
          </div>
          <div class="details-pic">
            <!-- <div class="details-pic-img">
              <img :src="new_info.avatar" alt />
            </div>
            <p>修改头像</p>-->
            <el-upload
              action="#"
              list-type="picture-card"
              :show-file-list="false"
              :auto-upload="true"
              :on-change="triggerChange"
              :http-request="uploadSectionFile"
            >
              <div class="details-pic-img">
                <el-avatar :src="new_info.avatar" :size="130"></el-avatar>
              </div>
              <p>修改头像</p>
            </el-upload>
          </div>
          <div class="details-wire"></div>
          <div class="details-phone">
            <div class="details-phone-text">
              <div class="details-phone-text-hint">
                <p>手机号</p>
              </div>
              <div class="details-phone-text-num">
                <p>{{new_info.phone}}</p>
              </div>
            </div>
            <div class="details-phone-edit" @click="show=!show">修改</div>
          </div>
          <div class="details-wire"></div>
          <div class="details-phone">
            <div class="details-phone-text">
              <div class="details-phone-text-hint">
                <p>昵称</p>
              </div>
              <div class="details-phone-text-num">
                <el-input v-model="new_info.nickname" placeholder="请输入内容"></el-input>
              </div>
            </div>
          </div>
          <div class="details-wire"></div>
          <div class="details-phone">
            <div class="details-phone-text">
              <div class="details-phone-text-hint">
                <p>性别</p>
              </div>
              <div class="details-phone-text-num">
                <el-radio-group v-model="new_info.sex">
                  <el-radio
                    :label="+item.dictValue"
                    v-for="item in sex_list"
                    :key="item.dictValue"
                  >{{ item.dictLabel }}</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="details-phone-conserve" @click="save_changes">保存</div>
          </div>
          <div class="details-wire"></div>
        </div>
        <!-- 弹窗 -->
      </div>
      <div class="datum-their">中国数字人知识产权存证保护平台</div>
    </div>
    <div class="pop" v-if="show">
      <div class="pop-box">
        <div class="pop-box-close" @click="show=!show">
          <img src="../../images/close.png" alt />
        </div>
        <div class="pop-box-title">修改手机号</div>
        <div class="pop-box-item">
          <p>原手机号码</p>
          <el-input v-model="new_info.phone" disabled placeholder="请输入原手机号码"></el-input>
        </div>
        <div class="pop-box-item">
          <p>短信验证码</p>
          <el-input v-model="inputVal" placeholder="请输入验证码" maxlength="10"></el-input>
          <div class="pop-box-item-code">
            <span v-if="time===-1" @click="codeChange">获取验证码</span>
            <span v-else>{{time}} s后重发</span>
          </div>
        </div>
        <div class="pop-box-item">
          <p>新手机号码</p>
          <el-input v-model="newphone" placeholder="请输入新手机号码"></el-input>
        </div>
        <div class="pop-box-submit">
          <div class="pop-box-submit-but" @click="submit">
            <p>确定</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var client;
import OSS from "ali-oss";
import Head from "../../components/Head";
import Falls from "../../components/Falls_new";
import html2canvas from "html2canvas";

import {
  getSts,
  getInfo,
  sendCode,
  savePhone,
  mylist,
  maininfo,
  comment_List,
  collect_List,
  people_id,
  collect_verityNums,
  people_del,
  save,
  post_Comment,
  sexList
} from "@/utils/api";
import { toQQzone, toQQ, toWeibo, toWechat } from "@/utils/share.js";

export default {
  name: "headView",
  components: { Head, Falls },
  data() {
    return {
      info: {},
      new_info: {},
      radio: "1",
      selectVal: 1,
      show: false,
      inputVal: "",
      newphone: "",
      time: -1,
      mylist_poe: [],
      Information: {},
      message_list: [], // 评论列表
      collect_lists: [], // 收藏列表
      digit_list: [], // 我的数字人
      digit_list_2: [], // 我的数字人_分类
      digit_index: 0, //我的数字人下标
      digit_details: {}, // 我的数字人详情
      verityNums: {}, //数量统计
      srcList: [], //证书列表
      sex_list: [], // 性别字典
      total: 0, // 留言总数
      total_collect: 0, // 收藏总数,
      digit_name: "", //权属人
      shareShow: false //分享
    };
  },
  created() {
    // 页面头部标题
    document.title = this.$route.meta.title;
    if (this.$route.params.id) {
      this.selectVal = this.$route.params.id;
    }
    this.init();
    this.getInfo();
    this.getmylist();
  },
  methods: {
    // 我的留言分页
    handleCurrentChange(val) {
      // 获取留言列表
      comment_List({ pageNum: val, pageSize: 10 }, res => {
        if (res.code == 200) {
          this.message_list = res.rows;
          this.total = res.total;
          const formData = new FormData();
          this.message_list.forEach(element => {
            formData.append("ids", element.id);
            console.log(element.id);
          });
          console.log(formData);
          if (this.message_list.length < 1) {
            return;
          }
          post_Comment(formData, res => {
            if (res.code == 200) {
              // formData.set("ids", 2);
              // console.log(formData);
              // this.collect_lists = res.rows
            } else {
              this.$message({
                message: res.msg
              });
            }
          });
        } else {
          this.$message({
            message: res.msg
          });
        }
      });
    },
    // 我的收藏分页
    handleCurrentChange_collect(val) {
      // 获取留言列表
      collect_List({ pageNum: val, pageSize: 10 }, res => {
        if (res.code == 200) {
          this.collect_lists = res.rows;
          this.total_collect = res.total;
        } else {
          this.$message({
            message: res.msg
          });
        }
      });
    },
    // 选择图片
    triggerChange(e) {
      this.new_info.avatar = e.url;
      // this.permitUrl = e.url;
      this.hideUpload = true;
    },
    // 图片上传地址转换
    uploadSectionFile(option) {
      // console.log("图片上传", option.file);
      let uid = option.file.uid;
      let file = option.file;
      const date = new Date().getTime();
      const namearr = file.name.split(".");
      // 定义上传文件的名字+后缀
      const storeAs = uid + "" + date + "." + namearr[1];
      // 调用oss上传接口
      client
        .multipartUpload("carplusgo-info-img/" + storeAs, file)
        .then(response => {
          if (response.res.status === 200) {
            console.log("上传成功", response.res);
            if (response.res.requestUrls[0].indexOf("0") == -1) {
              this.new_info.avatar = response.res.requestUrls[0];
            } else {
              this.new_info.avatar = response.res.requestUrls[0].split("?")[0];
            }
          }
        })
        .catch(function(err) {
          console.error("error: ", err);
        });
    },
    // 保存信息修改
    save_changes() {
      save(
        {
          nickname: this.new_info.nickname,
          avatar: this.new_info.avatar,
          sex: this.new_info.sex
        },
        res => {
          if (res.code == 200) {
            this.$message({
              message: "个人信息修改成功"
            });
            this.info.avatar = this.new_info.avatar;
            this.info.nickname = this.new_info.nickname;
            localStorage.setItem("avatar", this.new_info.avatar);
            localStorage.setItem("nickname", this.new_info.nickname);
          } else {
            this.$message({
              message: res.msg
            });
          }
        }
      );
    },
    //取消收藏
    getmsg(e) {
      console.log(e);
      people_del({ id: e.item.peopleId }, res => {
        if (res.code == 200) {
          this.collect_lists.splice(e.index, 1);
          console.log(res);
        } else {
          this.$message({
            message: res.msg
          });
        }
      });
    },
    getInfo() {
      getInfo({}, res => {
        console.log(res);
        this.info = res.user;
        this.new_info = { ...res.user };
      });
    },
    init() {
      getSts({}, res => {
        client = new OSS({
          region: "oss-cn-beijing",
          accessKeyId: res.data.oss.credentials.accessKeyId,
          accessKeySecret: res.data.oss.credentials.accessKeySecret,
          stsToken: res.data.oss.credentials.securityToken,
          bucket: res.data.bucket
        });
      });
    },
    // 下载图片
    saveImage() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.suibiandeqiming, {
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1 //设置放大的倍数
      }).then(canvas => {
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
        this.imgUrl = url;
        //将图片下载到本地
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = this.digit_details.name; // 设置图片名称没有设置则为默认
        a.href = this.imgUrl; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      });
    },

    // 发布平台打开
    open_url(url) {
      if (url != "" && url != null) {
        window.open(url, "_blank");
      }
    },
    getmylist() {
      // 我的主体
      maininfo({}, res => {
        console.log("+++++++++++++++", res);
        if (res.code == 200) {
          this.Information = res.data;
        }
        // this.info = res.user
      });
      // 我的数字人数量
      collect_verityNums({}, res => {
        console.log("-----------", res);
        if (res.code == 200) {
          this.verityNums = res.data;
        }
        // this.info = res.user
      });
      // 我的数字人
      mylist({}, res => {
        console.log("-----------", res);
        if (res.code == 200) {
          this.digit_list = res.rows;
          console.log("this.digit_list", this.digit_list);
          this.digit_list_2 = [...res.rows];
        }
        // this.info = res.user
      });
    },
    digit_open(index) {
      if (index != 0) {
        mylist({ verifyStatus: index }, res => {
          if (res.code == 200) {
            // this.digit_list = res.rows
            this.digit_list_2 = [...res.rows];
          }
        });
      } else {
        mylist({}, res => {
          if (res.code == 200) {
            // this.digit_list = res.rows
            this.digit_list_2 = [...res.rows];
          }
        });
      }
      this.digit_index = index;
    },
    // 获取验证码
    codeChange() {
      var verify = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
      if (verify.test(this.info.phone)) {
        sendCode({ phone: this.info.phone }, res => {
          console.log(res);
          if (res.code === 200) {
            this.time = 60;
            var setTime = setInterval(() => {
              --this.time;
              console.log(this.time);
              if (this.time < 0) {
                clearInterval(setTime);
              }
            }, 1000);
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
        });
      } else {
        this.$message({
          showClose: true,
          message: "手机号有误",
          type: "warning"
        });
      }
    },
    submit() {
      savePhone(
        {
          phone: this.info.phone,
          newPhone: this.newphone,
          code: this.inputVal
        },
        res => {
          if (res.code == 200) {
            this.show = false;
            this.$message({
              message: "保存成功",
              type: "success"
            });
          } else {
            this.$message({
              message: res.msg
            });
          }
        }
      );
    },
    select_go(item) {
      //去修改数字人
      this.$router.push("/applyFor?edit=" + item.id);
    },
    go_pag(item) {
      //去支付未支付的订单
      // this.$router.push({ name: "applyFor", params: { unpaid: item.orderNo } });
       this.$router.push({ name: "applyFor", params: { unpaid: item.id} });
      // console.log(item);
      // this.$router.push("/applyFor?unpaid=" + );

      // console.log({id:1,id:2})
      // const formData = new FormData();
      // formData.set("ids", 1);
      // formData.set("ids", 2);
      // console.log(formData);
    },
    selectChange(e, item) {
      if (e == 5) {
        this.$confirm("是否退出当前用户", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            localStorage.clear();
            this.$router.push({ name: "home" });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
        return;
      }
      this.selectVal = e;
      if (e == -1) {
        people_id({ id: item.id }, res => {
          if (res.code == 200) {
            (this.digit_details = res.data),
              (this.digit_name = res.data.subjectInfo.name);
            // digit_details.verifyImg!=''&&digit_details.makerImg!=''&&digit_details.filingImg!=''&&digit_details.cardImg!=''
            this.srcList = [
              this.digit_details.verifyImg,
              this.digit_details.makerImg,
              this.digit_details.filingImg,
              this.digit_details.cardImg
            ];
            // this.srcList = [this.digit_details.verifyImg, this.digit_details.filingImg, this.digit_details.cardImg]
          } else {
            this.$message({
              message: res.msg
            });
          }
        });
      } else if (e == 2) {
        comment_List({ pageNum: 1, pageSize: 10 }, res => {
          if (res.code == 200) {
            this.message_list = res.rows;
            this.total = res.total;
            const formData = new FormData();
            this.message_list.forEach(element => {
              formData.append("ids", element.id);
              console.log(element.id);
            });
            console.log(formData);
            if (this.message_list.length < 1) {
              return;
            }
            post_Comment(formData, res => {
              if (res.code == 200) {
                // formData.set("ids", 2);
                // console.log(formData);
                // this.collect_lists = res.rows
              } else {
                this.$message({
                  message: res.msg
                });
              }
            });
          } else {
            this.$message({
              message: res.msg
            });
          }
        });
      } else if (e == 3) {
        collect_List({}, res => {
          if (res.code == 200) {
            this.collect_lists = res.rows;
            this.total_collect = res.total;
            console.log(this.total_collect);
          } else {
            this.$message({
              message: res.msg
            });
          }
        });
      } else if (e == 4) {
        sexList({}, res => {
          if (res.code == 200) {
            this.sex_list = res.data;
          } else {
            this.$message({
              message: res.msg
            });
          }
        });
      }

      // console.log(e);
    },
    go_filings() {
      this.$router.push("/applyFor");
    },
    dow(url, name_s) {
      window.location.href = url;
      let name = name_s + "." + url.split(".")[url.split(".").length - 1];
      this.getBlob(url, blob => {
        this.saveAs(blob, name);
      });
    },
    getBlob(url, cb) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.onload = function() {
        if (xhr.status === 200) {
          cb(xhr.response);
        }
      };
      xhr.send();
    },

    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      } else {
        var link = document.createElement("a");
        var body = document.querySelector("body");

        link.href = window.URL.createObjectURL(blob);
        link.download = filename;

        link.style.display = "none";
        body.appendChild(link);

        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },
    mine_edit() {
      this.$router.push("/modify");
    },
    // 复制连接
    copy(index) {
      // console.log(window.location.href);
      var url =
        "中国数字人知识产权存证保护平台【官方认证】 " +
        this.digit_details.name +
        " " +
        window.location.href;
      if (index == 1) {
        let oInput = document.createElement("input");
        oInput.value = url;
        oInput.style.opacity = 0;
        document.body.appendChild(oInput);
        // document.getElementById("copy_id").appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value);
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: "复制成功",
          type: "success"
        });
      } else if (index == 2) {
        toQQzone(
          window.location.href + "?id=" + this.digit_details.id,
          "中国数字人知识产权存证保护平台【官方认证】 " +
            this.digit_details.name,
          this.digit_details.imgUrl
        );
      } else if (index == 3) {
        toWeibo(
          window.location.href + "?id=" + this.digit_details.id,
          "中国数字人知识产权存证保护平台【官方认证】 " +
            this.digit_details.name
        );
      }
    }
  }
};
</script>

<style scoped lang="scss">
.centent {
  width: 100%;
  height: 100%;
  position: relative;
}

.pop {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;

  &-box {
    width: 700px;
    height: 466px;
    margin-top: 315px;
    background-color: rgb(255, 255, 255);
    position: relative;
    margin-left: -30px;

    &-close {
      width: 17px;
      height: 17px;
      position: absolute;
      right: 28px;
      top: 22px;
      cursor: pointer;
      > img {
        width: 100%;
      }
    }
    &-title {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      margin-top: 60px;
      margin-bottom: 50px;
    }
    &-item {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      padding-left: 69px;
      margin-bottom: 20px;

      &-el-input {
        position: relative;
      }

      &-code {
        position: absolute;
        right: 67px;
        z-index: 9999;
        font-size: 16px;
        font-weight: 400;
        color: #3a7bd8;
        cursor: pointer;
      }
    }
    &-submit {
      width: 100%;
      margin-top: 48px;
      &-but {
        width: 414px;
        height: 66px;
        margin: 0 auto;
        text-align: center;
        line-height: 66px;
        color: #fff;
        font-size: 20px;
        font-weight: 400;
        background: linear-gradient(135deg, #3b7ad8, #10a3e4);
        box-shadow: 1px 1px 10px 0px rgba(12, 34, 65, 0.23);
        cursor: pointer;
      }
    }
  }
}
:deep .el-input__inner {
  width: 482px;
  height: 46px;
  margin-left: 20px;
  padding-left: 20px;
  outline: none;
  border: 1px solid #dddddd;
}
:deep .el-input {
  width: 482px;
  height: 46px;
}

.datum {
  max-width: 1920px;
  min-width: 1440px;
  min-height: 87vh;
  margin: 0 auto;
  position: relative;
  // background: red;
  border: 1px solid transparent;
  &-their {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    position: absolute;
    bottom: 28px;
  }
  &-box {
    width: 73%;
    min-width: 1400px;
    margin: 0 auto;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 130px;
    &-subject {
      width: 348px;
      min-width: 348px;
      height: 780px;
      background: #fff;
      padding-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20px;
    }
    &-details {
      width: 1032px;
      min-height: 748px;
      background: #fff;
    }
  }
}

.subject {
  &-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px dashed #3c7cd8;
    // padding: 10px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    // > img {
    //   width: 100%;
    //   border-radius: 50%;
    // }
  }
  &-phone {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 500;
    color: #000;
    height: 30px;
  }
  &-conserve {
    width: 224px;
    height: 62px;
    background-color: #3a7bd8;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 38px;
    cursor: pointer;
    &-img {
      width: 19px;
      height: 22px;
      overflow: hidden;
      margin-right: 16px;
      > img {
        width: 100%;
      }
    }
  }

  &-wire {
    width: 224px;
    height: 1px;
    margin-top: 20px;
    margin-bottom: 43px;
    background-color: #dddddd;
  }
  &-item {
    width: 100%;
    display: flex;
    padding-left: 90px;
    justify-content: start;
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 55px;
    cursor: pointer;
    &-img {
      margin-right: 17px;
      > img {
        width: 100%;
      }
    }
  }
}

.mine {
  width: 1032px;
  &-top {
    width: 100%;
    background-color: #fff;
    font-size: 24px;
    font-weight: 500;
    color: #000;
    padding: 49px 50px 41px;

    &-title {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
    }
    &-wire {
      width: 6px;
      height: 22px;
      background-color: #3a7bd8;
      margin-right: 10px;
    }
  }
  &-down {
    width: 932px;
    margin: 0 auto;
    border: 1px dashed #3c7dd870;
    background: rgba(58, 123, 216, 0.1);
    display: flex;
    flex-wrap: wrap;
    padding: 40px 30px 0;
    position: relative;
    .mine_edit {
      font-size: 18px;
      color: #3c7cd8;
      line-height: 24px;
      display: flex;
      align-items: center;
      position: absolute;
      right: 16px;
      top: 16px;
      cursor: pointer;
      img {
        margin-right: 8px;
      }
    }
    &-item {
      &-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #999999;
        font-weight: 400;

        &-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #3a7bd8;
          margin-right: 14px;
        }
      }
      &-text {
        padding-left: 20px;
        font-size: 18px;
        color: #333333;
        font-weight: 400;
        line-height: 36px;
      }
    }
    &-item2 {
      &-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #999999;
        font-weight: 400;

        &-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #3a7bd8;
          margin-right: 14px;
        }
      }
      &-text {
        padding-left: 20px;
        font-size: 18px;
        color: #333333;
        font-weight: 400;
        line-height: 36px;
      }
    }
  }
  &-content {
    width: 100%;
    margin-top: 20px;
    background-color: #ffff;
    padding: 50px 50px 39px;

    &-title {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      font-size: 24px;
      font-weight: 500;
      color: #000;
    }
    &-wire {
      width: 6px;
      height: 22px;
      background-color: #3a7bd8;
      margin-right: 10px;
    }
  }
  &-list {
    &-title {
      width: 100%;
      display: flex;
      padding-left: 16px;
      &-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        color: #000;
        margin-right: 50px;
        cursor: pointer;
        &-wier {
          width: 50%;
          height: 6px;
          background-color: #3a7bd8;
          margin-top: 12px;
        }
      }
    }
    &-wier {
      width: 100%;
      height: 1px;
      background: #dddddd;
    }
    &-item {
      width: 100%;
      padding: 40px 0px;
      border-bottom: 1px dashed #c5c5c5;
      // background-color: yellow;
      display: flex;
      &-img {
        width: 160px;
        height: 227px;
        overflow: hidden;
        > img {
          width: 100%;
        }
      }
      &-text {
        margin-left: 20px;
        flex: 1;
        // height: 200px;
        // background-color: #3a7bd8;
        padding-top: 13px;
      }
    }
  }
}

.details {
  width: 1032px;
  &-info {
    width: 100%;

    background: #fff;
    padding: 53px 50px 45px;
    &-title {
      display: flex;
      font-size: 18px;
      font-weight: 500;
      &-img {
        width: 12px;
        height: 12px;
        margin: 0 21px 0 19px;
      }
    }
    &-box {
      width: 100%;
      margin-top: 30px;
      display: flex;
      &-img {
        width: 310px;
        height: 409px;
        overflow: hidden;
        position: relative;
        > img {
          width: 100%;
        }
        &-bg {
          width: 220px;
          height: 48px;
          border-radius: 24px;
          position: absolute;
          bottom: 14px;
          left: 51px;
          background: url("../../images/id-bg.png") no-repeat;
          background-size: 105% 125%;
          background-position: center;
          padding-left: 5px;
          display: flex;
          align-items: center;
          font-size: 20px;
          font-weight: bold;
          color: #000;
          p {
            font-size: 18px;
          }
          &-logo {
            width: 41px;
            height: 41px;
            margin-right: 7px;
            overflow: hidden;
            > img {
              width: 100%;
            }
          }
        }
      }
      &-center {
        flex: 1;
        margin-left: 40px;
      }
    }
  }
  &-accredit {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
    padding: 50px 50px 32px;
    &-item {
      width: 932px;
      height: 60px;
      font-size: 18px;
      font-weight: bold;
      padding: 0 36px 0 31px;
      margin-bottom: 20px;
      background: rgba(58, 123, 216, 0.1);
      border: 1px dashed #3c7cd8;
      display: flex;
      justify-content: space-between;
      line-height: 60px;
    }
    &-item > p:nth-child(2) {
      color: #3a7bd8;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
    }
    &-box {
      display: flex;
    }
    &-img {
      width: 234px;
      // outline: 1px solid red;
      margin-right: 40px;
      > img {
        width: 100%;
      }
      > p {
        margin-top: 19px;
        margin-bottom: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #000;
      }
    }
    &-video {
      max-width: 780px;
      video {
        max-width: 780px;
      }
      > img {
        width: 100%;
      }
      > p {
        margin-top: 19px;
        margin-bottom: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #000;
      }
    }
  }
  &-ccie {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
    padding: 50px 60px 80px 50px;
    &-box {
      display: flex;
      justify-content: space-between;
      &-item {
        width: 279px;
        height: 394px;
        > img {
          width: 100%;
        }
      }
      &-card {
        width: 443px;
        margin: 0 auto;
        > img {
          width: 100%;
        }
      }
    }
  }
  &-tort {
    width: 414px;
    height: 100px;
    margin: 50px auto;
    background-color: #3a7bd8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &-img {
      width: 57px;
      height: 50px;
      > img {
        width: 100%;
      }
    }
    &-text {
      font-size: 18px;
      color: #fff;
      margin-left: 20px;
      line-height: 32px;
    }
  }
}

.collect {
  width: 1032px;
  height: 100%;
  background: rgb(253, 253, 253);
  &-box {
    // outline: 1px solid red;
    padding: 0 0 0 50px;
  }
}

.my {
  &-info {
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    position: relative;
    padding-right: 40px;
    &-p {
      max-width: 50%;
    }
    &-pro {
      position: absolute;
      right: 0px;
      width: 32px;
    }
    &-status {
      // width: 68px;
      max-width: 50%;
      padding: 0 10px;
      height: 26px;
      background-color: #3a7cd81f;
      font-size: 14px;
      font-weight: 400;
      color: #3a7bd8;
      margin-left: 15px;
      text-align: center;
      line-height: 26px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    &-wier {
      width: 100%;
      height: 1px;
      background: #dddddd;
    }
    &-id {
      margin-top: 30px;
      font-size: 18px;
      font-weight: bold;
      color: #3a7bd8;
      margin-bottom: 20px;
    }
    &-box {
      width: 100%;
      display: flex;
      margin-bottom: 30px;
      &-item {
        margin-right: 50px;
        &-sex {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 400;
          color: #999999;
          &-circle {
            width: 6px;
            height: 6px;
            background-color: #3a7bd8;
            border-radius: 50%;
            margin-right: 14px;
          }
        }
        &-girl {
          color: #333333;
          padding-left: 20px;
          line-height: 36px;
        }
      }
    }
    &-looks {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 30px;
      &-circle {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 14px;
        background-color: #3a7bd8;
      }
      &-text {
        color: #999999;
      }
      &-tint {
        color: #3c7bd8;
      }
      &-item {
        color: #333333;
      }
    }
    &-looks_ss {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 30px;
      flex-wrap: wrap;
      line-height: 30px;
      &-circle {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 14px;
        background-color: #3a7bd8;
      }
      &-text {
        color: #999999;
      }
      &-tint {
        color: #3c7bd8;
      }
      &-item {
        color: #333333;
      }
    }
    &-accredit {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      padding-right: 40px;
    }
    &-introduce {
      margin-top: 30px;
      display: flex;
      &-circle {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-top: 10px;
        background-color: #3a7bd8;
        margin-right: 14px;
      }
      &-text {
        flex: 1px;
        font-size: 18px;
        font-weight: 400px;
        color: #999999;
        > span {
          color: #333333;
        }
      }
    }
  }
}

.intro {
  &-top {
    width: 100%;
    // background-color: red;
    display: flex;
    justify-content: space-between;
    &-left {
      width: 630px;
      &-box {
        display: flex;
        align-items: center;
        &-name {
          font-size: 22px;
          font-weight: bold;
          color: #000;
          max-width: 50%;
        }
        &-role {
          // width: 68px;
          padding: 0 10px;
          height: 26px;
          background-color: #3a7cd81f;
          font-size: 14px;
          font-weight: 400;
          color: #3a7bd8;
          text-align: center;
          line-height: 26px;
          margin: 0 10px;
          max-width: 50%;
        }
        &-designation {
          // width: 56px;
          padding: 0 10px;
          height: 26px;
          background-color: #3a7bd8;
          font-size: 14px;
          font-weight: 400;
          color: #fff;
          text-align: center;
          line-height: 26px;
        }
      }
      &-time {
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;
      }
      &-result {
        font-size: 16px;
        font-weight: 400;
        color: #58bb00;
      }
    }
    &-right {
      width: 95px;
      height: 36px;
      border: 1px solid #3a7bd8;
      background: rgba(58, 123, 216, 0.1);
      font-size: 15px;
      font-weight: 500;
      color: #3a7bd8;
      text-align: center;
      line-height: 36px;
      cursor: pointer;
    }
    &-right2 {
      width: 54px;
      height: 36px;
      border: 1px solid #dddddd;
      background: rgba(153, 153, 153, 0.1);
      font-size: 15px;
      font-weight: 500;
      color: #666666;
      text-align: center;
      line-height: 36px;
      cursor: pointer;
    }
  }
  &-down {
    line-height: 32px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin-top: 31px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.mine-down-item:nth-child(1),
.mine-down-item:nth-child(2),
.mine-down-item:nth-child(3),
.mine-down-item:nth-child(4) {
  margin-right: 79px;
  margin-bottom: 34px;
}
.mine-down-item:nth-child(5) {
  margin-right: 56px;
  margin-bottom: 34px;
}
.mine-down-item:nth-child(6) {
  // margin-right: 197px;
  width: 342px;
  margin-bottom: 34px;
}

.mine-down-item2:nth-child(n) {
  // margin-right: 79px;
  margin-bottom: 34px;
  width: 33.3%;
}
.mine-down-item2:nth-child(2n) {
  // margin-right: 79px;
  margin-bottom: 34px;
  width: 33.3%;
}
.mine-down-item2:nth-child(3n) {
  // margin-right: 79px;
  margin-bottom: 34px;
  width: 33.3%;
}
// .mine-down-item2:nth-child(4) {
//   margin-right: 79px;
//   margin-bottom: 34px;
// }
.details {
  &-title {
    width: 100%;
    margin-top: 50px;
    margin-left: 50px;
    display: flex;
    align-items: center;

    &-wire {
      width: 6px;
      height: 22px;
      background-color: #3a7bd8;
      margin-right: 10px;
    }
    > p {
      font-size: 24px;
      font-weight: Medium;
      color: #000;
    }
  }
  &-pic {
    width: 100%;
    margin-top: 49px;
    margin-bottom: 48px;
    // cursor: pointer;
    display: flex;
    justify-content: center;
    ::v-deep {
      .el-upload--picture-card {
        border: none;
        margin: auto;
        p {
          width: 100%;
          text-align: center;
          margin-top: 16px;
          font-size: 16px;
          font-weight: 500;
          color: #3a7bd8;
          line-height: 25px;
        }
      }
    }
    &-img {
      width: 132px;
      height: 132px;
      margin: 0 auto;
      // overflow: hidden;
      > img {
        width: 100%;
        border-radius: 50%;
      }
    }
  }
  &-wire {
    width: 710px;
    height: 1px;
    margin: auto;
    background-color: #dddddd;
  }
  &-phone {
    width: 710px;
    margin: auto;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-text {
      &-hint {
        font-size: 18px;
        font-weight: 500;
        color: #333333;
      }
      &-num {
        margin-top: 17px;
        font-weight: 500;
        font-size: 16px;
        color: #666666;
        ::v-deep {
          .el-input__inner {
            border: none;
            font-size: 16px;
            margin-left: 0;
            padding-left: 0;
          }
        }
      }
    }
    &-edit {
      width: 100px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      color: #000;
      border: 1px solid #dddddd;
      cursor: pointer;
    }
    &-conserve {
      width: 100px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      color: #3a7bd8;
      border: 1px solid #3a7bd8;
      cursor: pointer;
    }
  }
}

.info {
  width: 932px;
  margin: 0px auto 20px;
  padding: 21px 21px 29px;
  border: 1px solid #dddddd;
  display: flex;
  align-items: center;
  &-img {
    width: 66px;
    height: 66px;
    position: relative;
    > img {
      width: 100%;
    }
    &-dot {
      position: absolute;
      width: 14px;
      height: 14px;
      top: 0;
      right: 5px;
      border-radius: 50%;
      border: 2px solid #fff;
      background-color: red;
    }
  }
  &-text {
    margin-left: 20px;
    line-height: 30px;
    &-box {
      font-size: 16px;
      font-weight: 400;
      color: #000;
    }
    &-time {
      font-size: 16px;
      font-weight: 400;
      color: #999999;
      > span {
        margin-left: 24px;
        color: #3a7bd8;
      }
    }
  }
}

.action {
  color: #3a7bd8;
}
:deep .el-radio__inner::after {
  width: 8px;
  height: 8px;
}
::v-deep {
  .el-avatar > img {
    min-width: 100%;
  }
}
.share {
  width: 32px;
  height: 32px;
  margin-right: 20px;
  position: relative;
  cursor: pointer;
  > img {
    width: 100%;
  }
  &-box {
    position: absolute;
    width: 266px;
    // height: 266px;
    top: 46px;
    right: 0px;
    background-color: #ffffff;
    box-shadow: -1px 2px 26px 1px rgba(12, 34, 65, 0.11);
    padding: 10px;
    &-item {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      display: flex;
      align-items: center;
    }
    &-item:nth-child(1) {
      padding: 21px 16px 22px;
      border-bottom: 1px solid #dddddd;
      cursor: pointer;
      > img {
        width: 13px;
        height: 13px;
        margin-right: 24px;
      }
    }
    &-item:nth-child(2) {
      margin-top: 23px;
      cursor: pointer;
      > img {
        width: 18px;
        height: 15px;
        margin-right: 24px;
        margin-left: 14px;
      }
    }
    &-item:nth-child(3) {
      margin-top: 28px;
      cursor: pointer;
      > img {
        width: 13px;
        height: 16px;
        margin-right: 24px;
        margin-left: 14px;
      }
    }
    &-item:nth-child(4) {
      margin-top: 27px;
      cursor: pointer;
      > img {
        width: 16px;
        height: 16px;
        margin-right: 24px;
        margin-left: 14px;
      }
    }
    &-item:nth-child(5) {
      margin-top: 27px;
      cursor: pointer;
      padding-bottom: 8px;
      > img {
        width: 17px;
        height: 14px;
        margin-right: 24px;
        margin-left: 14px;
      }
    }
  }
}
</style>
